<!--
 Copyright 2025 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<app-header (emitSearch)="this.searchTerm({ term: $event })"></app-header>

<div class="container m-auto grid grid-cols-4 gap-0 m-7" style="margin-top: 3rem"
     *ngIf="imagenEntireImageDocuments.length > 0 || imagenBackgroundDocuments.length > 0 || geminiDocuments.length > 0 || showDefaultDocuments">

  <div class="col-span-4 bg-custom-gray p-4" style="padding: 1rem">
    <span class="text-3xl m-0">Image Background Changer</span>
    <p *ngIf="selectedResult?.enhancedPrompt && !showDefaultDocuments"
       class="text-sm text-gray-600 mt-1 truncate"
       matTooltip="{{selectedResult?.enhancedPrompt}}"
       matTooltipPosition="below"
       aria-label="Full prompt text for the selected image">
      Prompt: {{ selectedResult?.enhancedPrompt }}
    </p>
    <p *ngIf="summary && (showDefaultDocuments || !selectedResult?.enhancedPrompt)" class="text-sm text-gray-600 mt-1">
      {{ summary }}
    </p>
  </div>

  <!-- Image display and interaction area (Left 3 columns) -->
  <div class="col-span-3 bg-white p-4" style="display: flex; flex-direction: column; min-height: 80vh;">

    <!-- 1. Single Main Image Display Area -->
    <div class="flex-grow flex items-center justify-center mb-4 relative bg-gray-100 p-2 rounded-lg shadow min-h-[40vh] max-h-[50vh]">
      <img [src]="'data:image/png;base64,' + (selectedResult?.image?.encodedImage || '')"
           *ngIf="!showDefaultDocuments && selectedResult"
           class="max-h-full max-w-full object-contain rounded" alt="Selected Edited Image" />
      <!-- Placeholder for when no results or no selection -->
      <img [src]="defaultPlaceholderImageUrl"
           *ngIf="showDefaultDocuments || (!selectedResult && (imagenEntireImageDocuments.length > 0 || imagenBackgroundDocuments.length > 0 || geminiDocuments.length > 0))"
           class="max-h-full max-w-full object-contain opacity-50 rounded" alt="Image Placeholder" />
      <!-- Message if no results at all -->
       <div *ngIf="!showDefaultDocuments && imagenEntireImageDocuments.length === 0 && imagenBackgroundDocuments.length === 0 && geminiDocuments.length === 0" class="text-center text-gray-500 p-4">
          No images were generated for this query.
       </div>
      <!-- Source of the main selected image -->
      <div *ngIf="selectedResult?.source && !showDefaultDocuments"
           class="absolute top-2 right-2 bg-neutral-800 bg-opacity-70 text-white text-xs px-2 py-1 rounded-md shadow">
        Source: {{ selectedResult?.source }}
      </div>
    </div>

    <!-- 2. Three-Column Thumbnail Area -->
    <div class="grid grid-cols-3 gap-x-4" style="max-height: 30vh;">

      <!-- Column 1: Imagen Entire Image Results -->
      <div class="flex flex-col h-full">
        <h4 class="text-md font-semibold mb-2 text-center text-gray-700 sticky top-0 bg-white z-10 py-1">Imagen 3 Edited Entire Image</h4>
        <div class="flex-grow overflow-y-auto p-1 bg-gray-50 rounded-lg custom-scrollbar">
          <div class="flex flex-wrap justify-center gap-2">
            <div class="w-24 h-24 cursor-pointer relative group border-2 hover:border-blue-500 rounded-md overflow-hidden shadow-sm"
                 [class.border-blue-600]="result === selectedResult"
                 [class.border-transparent]="result !== selectedResult"
                 *ngFor="let result of imagenEntireImageDocuments"
                 (click)="changeImageSelection(result)">
              <img [src]="'data:image/png;base64,' + result.image?.encodedImage"
                   class="w-full h-full object-cover" alt="Edited Entire Image Thumbnail" />
            </div>
            <div *ngIf="imagenEntireImageDocuments.length === 0 && !showDefaultDocuments" class="text-center text-gray-400 text-sm p-4">
              No "entire image" edits.
            </div>
          </div>
        </div>
      </div>

      <!-- Column 2: Imagen Background Only Results -->
      <div class="flex flex-col h-full">
        <h4 class="text-md font-semibold mb-2 text-center text-gray-700 sticky top-0 bg-white z-10 py-1">Imagen 3 Edited Background Only</h4>
        <div class="flex-grow overflow-y-auto p-1 bg-gray-50 rounded-lg custom-scrollbar">
          <div class="flex flex-wrap justify-center gap-2">
            <div class="w-24 h-24 cursor-pointer relative group border-2 hover:border-green-500 rounded-md overflow-hidden shadow-sm"
                 [class.border-green-600]="result === selectedResult"
                 [class.border-transparent]="result !== selectedResult"
                 *ngFor="let result of imagenBackgroundDocuments"
                 (click)="changeImageSelection(result)">
              <img [src]="'data:image/png;base64,' + result.image?.encodedImage"
                   class="w-full h-full object-cover" alt="Edited Background Thumbnail" />
            </div>
            <div *ngIf="imagenBackgroundDocuments.length === 0 && !showDefaultDocuments" class="text-center text-gray-400 text-sm p-4">
              No "background only" edits.
            </div>
          </div>
        </div>
      </div>

      <!-- Column 3: Gemini Results -->
      <div class="flex flex-col h-full">
        <h4 class="text-md font-semibold mb-2 text-center text-gray-700 sticky top-0 bg-white z-10 py-1">Gemini 2.0 Image</h4>
        <div class="flex-grow overflow-y-auto p-1 bg-gray-50 rounded-lg custom-scrollbar">
          <div class="flex flex-wrap justify-center gap-2">
            <div class="w-24 h-24 cursor-pointer relative group border-2 hover:border-purple-500 rounded-md overflow-hidden shadow-sm"
                 [class.border-purple-600]="result === selectedResult"
                 [class.border-transparent]="result !== selectedResult"
                 *ngFor="let result of geminiDocuments"
                 (click)="changeImageSelection(result)">
              <img [src]="'data:image/png;base64,' + result.image?.encodedImage"
                   class="w-full h-full object-cover" alt="Gemini Image Thumbnail" />
            </div>
            <div *ngIf="geminiDocuments.length === 0 && !showDefaultDocuments" class="text-center text-gray-400 text-sm p-4">
              No Gemini results.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Configuration panel (Right 1 column) -->
  <div class="col-span-1 bg-white p-5">
    <div class="flex flex-col">
      <h2 class="text-2xl font-semibold mb-4" style="font-size: 1.5rem;">Configuration</h2>

      <!-- AI Model -->
      <mat-form-field class="w-full mb-4">
        <mat-label>AI Model</mat-label>
        <mat-select [(value)]="selectedModel">
          <mat-option *ngFor="let model of imagen3ModelsList" [value]="model.value" (click)="changeImagen3Model(model)">
            {{ model.viewValue }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <!-- Number of Results -->
      <div class="flex flex-col mb-4">
        <div class="flex justify-between items-center">
            <mat-label class="text-lg">Number of Results</mat-label>
            <span class="text-lg font-medium">{{selectedNumberOfResults}}</span>
        </div>
        <mat-slider min="1" max="4" step="1" discrete class="w-full">
          <input matSliderThumb [(ngModel)]="selectedNumberOfResults" (input)="onNumberOfResultsChange($event)" [value]="selectedNumberOfResults">
        </mat-slider>
      </div>

      <!-- Mask Dilation -->
      <div class="flex flex-col mb-4">
        <div class="flex justify-between items-center">
            <mat-label class="text-lg">Mask Dilation</mat-label>
            <span class="text-lg font-medium">{{ selectedMaskDistilation | number:'1.0-4' }}</span>
        </div>
        <mat-label class="text-xs text-gray-500 mb-1">(Only for background editing)</mat-label>
        <mat-slider min="0.001" max="0.05" step="0.0005" discrete class="w-full">
          <input matSliderThumb [(ngModel)]="selectedMaskDistilation" (input)="onSliderChange($event)" [value]="selectedMaskDistilation">
        </mat-slider>
      </div>

      <div style="margin-top: 2rem;">
        <button mat-raised-button color="accent" (click)="goToHomePage()" class="w-full">
          Select Another Image
        </button>
      </div>

    </div>
  </div>
</div>

<!-- Placeholder for when there are no results and not even default documents are shown (e.g., initial state before any search) -->
<div *ngIf="!imagenEntireImageDocuments.length && !imagenBackgroundDocuments.length && !geminiDocuments.length && !showDefaultDocuments && !isLoading"
     class="flex flex-col items-center justify-center text-center p-8" style="min-height: calc(100vh - 64px); margin-top: 64px;"> <!-- Adjust 64px based on your header height -->
  <img src="assets/images/image_placeholder_icon.svg" alt="No results yet" class="w-32 h-32 mb-4 opacity-50">
  <h2 class="text-2xl font-semibold text-gray-700 mb-2">Describe the Background Change</h2>
  <p class="text-gray-500 mb-6">Enter a prompt for the new background you envision for your image.</p>
  <div class="w-full max-w-lg">
  </div>
</div>
